<template>
	<view id="ref" ref="ref">
		<fl_image :compress="false" :width="width" mode="widthFix" :src="src" @click="clickAd"></fl_image>
	</view>
</template>

<script>
	import fl_image from "./fl_image.vue"
	export default {
		name:"hot_area",
		components:{
			fl_image
		},
		data() {
			return {
				position:{}
			};
		},
		mounted(){
			setTimeout(() => {
				console.log("初始获取位置")
				this.initPosition()
			}, 500)
		},
		props:{
			width:{
				type:String
			},
			src:{
				type:String,
			},
			// {"index": 1,"type": 1,"width": 391,"height": 291,"color": "white","left": 8,"top": 5,"info": {"code": null}
			areas:{
				type:Array,
				default:[]
			},
		},
		methods:{
			initPosition(){
				// const query = uni.createSelectorQuery().in(this);  //支付宝
				let query = uni.createSelectorQuery();
				// #ifndef MP-ALIPAY || MP-DINGTALK
				query = query.in(this) // 支付宝小程序不支持in(this),而字节跳动小程序必须写in(this), 否则都取不到值
				// #endif
				query.select('#ref').boundingClientRect(data => {
					if (!data) {
						console.log("获取位置出错")
						return
					}
					console.log("得到布局位置信息" + JSON.stringify(data));
					console.log("节点离页面顶部的距离为" + data.top);
					this.position.left = data.left
					this.position.right = data.right
					this.position.top = data.top
					this.position.bottom = data.bottom
					// this.marginTop = data.top + data.height
				}).exec();
			},
			clickAd(e) {
				// const query = uni.createSelectorQuery().in(this);  //支付宝
				let query = uni.createSelectorQuery();
				// #ifndef MP-ALIPAY || MP-DINGTALK
				query = query.in(this) // 支付宝小程序不支持in(this),而字节跳动小程序必须写in(this), 否则都取不到值
				// #endif
				query.select('#ref').boundingClientRect(data => {
					if (!data) {
						console.log("获取位置出错")
						return
					}
					console.log("得到布局位置信息" + JSON.stringify(data));
					console.log("节点离页面顶部的距离为" + data.top);
					this.position.left = data.left
					this.position.right = data.right
					this.position.top = data.top
					this.position.bottom = data.bottom
					// this.marginTop = data.top + data.height
					
					// #ifdef H5
					this.web_click_ad(e)
					// #endif
					
					// #ifdef MP
					this.mp_click_ad(e)
					// #endif
					
				}).exec();
				
				
				
			},
			mp_click_ad(e){
				var adConfig = this.getAdConfig
				console.log(adConfig)
				var x,y
				x = e.detail.x
				y = e.detail.y
				// #ifdef MP-ALIPAY
				console.log("支付宝调用")
				x = e.detail.clientX
				y = e.detail.clientY
				// #endif
				
				console.log("点击的位置" + x + "===" + y)
				console.log("组件的位置" + JSON.stringify(this.position))
				var selected_item = {}
				for (var i = 0; i < this.areas.length; i++) {
					var item = this.areas[i]
					if (
						x < (item.hot_area.width + this.position.left + item.hot_area.left) &&
						x > (item.hot_area.left + this.position.left) &&
						y > (item.hot_area.top + this.position.top) &&
						y < (item.hot_area.height + this.position.top + item.hot_area.top)
					) {
						this.$emit("click",item)
						// this.showToast("你点击的是===》" + i)
						// console.log("你点击的是" + i)
						// console.log(item)
					} else {
						// console.log("没有点击到===》")
					}
				}
			},
			// web界面点击
			web_click_ad(e){
				// const query = uni.createSelectorQuery().in(this);;  //支付宝
				let query = uni.createSelectorQuery();
				// #ifndef MP-ALIPAY || MP-DINGTALK
				query = query.in(this) // 支付宝小程序不支持in(this),而字节跳动小程序必须写in(this), 否则都取不到值
				// #endif
				query.select('#ref').boundingClientRect(data => {
					if (!data) {
						console.log("获取位置出错")
						return
					}
					console.log("得到布局位置信息" + JSON.stringify(data));
					console.log("节点离页面顶部的距离为" + data.top);
					this.position.left = data.left
					this.position.right = data.right
					this.position.top = data.top
					this.position.bottom = data.bottom
					
					
					var x,y
					x = e.detail.x
					y = e.detail.y
					// #ifdef MP-ALIPAY
					console.log("支付宝调用")
					x = e.detail.clientX
					y = e.detail.clientY
					// #endif
					
					console.log("点击的位置" + x + "===" + y)
					console.log("组件的位置" + JSON.stringify(this.position))
					var selected_item = {}
					for (var i = 0; i < this.areas.length; i++) {
						var item = this.areas[i]
						if (
							x < (item.hot_area.width + this.position.left + item.hot_area.left) &&
							x > (item.hot_area.left + this.position.left) &&
							y > (item.hot_area.top + this.position.top) &&
							y < (item.hot_area.height + this.position.top + item.hot_area.top)
						) {
							this.$emit("click",item)
							// this.showToast("你点击的是===》" + i)
							console.log("你点击的是" + i)
							console.log(item)
						} else {
							console.log("没有点击到===》")
						}
					}
				}).exec();
			}
		},
	}
</script>

<style>

</style>
